<template>
  <div>
    <ul>
      <!--在Chrome的vue插件中可以查看参数信息-->
      <!--<li>{{$route.params.id}}</li>-->
      <li>{{$route.query.id}}</li>
      <li>id :{{messageDetail.id}}</li>
      <li>title :{{messageDetail.title}}</li>
      <li>content :{{messageDetail.content}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        messageDetail: {},
        messageDetails: []
      }
    },
    //mounted 只在页面完成后执行，只执行一次
    mounted() {
      setTimeout(() => {
        const myMessageDetails = [
          {"id": 1, "title": "message01", "content": "message01..."},
          {"id": 2, "title": "message02", "content": "message02..."},
          {"id": 3, "title": "message03", "content": "message03..."},
          {"id": 4, "title": "message04", "content": "message04..."},
          {"id": 5, "title": "message05", "content": "message05..."}
        ];
        this.messageDetails = myMessageDetails;
        //在Chrome的vue插件中可以查看参数信息
        //可能是文本类型，需要转换为数值
        //参数传递方式一：param方式的参数占位符
        // let id = this.$route.params.id * 1;
        // 参数传递方式二：query方式传递参数
        const id = value.query.id * 1;
        this.messageDetail = myMessageDetails.find(myMessageDetail => (myMessageDetail.id === id))
      }, 1000)
    },
    watch: {
      //由于mounted只指定一次，所以需要监视路由是否发生了变化
      $route: function (value) {
        // <!--参数传递方式一：param方式的参数占位符；-->
        // const id = value.params.id * 1;
        // <!--参数传递方式二：query方式传递参数-->
        const id = value.query.id * 1;
        this.messageDetail = this.messageDetails.find(myMessageDetail => (myMessageDetail.id === id))
      }
    }
  }
</script>

<style scoped>

</style>
